<template>
  <div>
    <el-row :class="[detailTable ? 'samples-info-box' : 'tab-table']">
      <el-col :span="24" class="samples-text-left samples-mb-10">
        <s-table
          :column="tableData.column"
          :data="tableData.data"
          :header-cell-class-name="headerCellClass"
          pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10,20,30,50]"
          :current-page.sync="listQuery.page"
          :total="total"
          :page-size="listQuery.pageSize"
          @size-change="handleSizeChange"
          @p-current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sTable from '@/components/STable/s-table'
export default {
  components: {
    sTable
  },

  props: {
    detailTable: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    listQuery: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {}
  },

  computed: {},

  mounted() {},

  methods: {
    // 表头样式
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (column.type == 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type == 'selection') {
        return ''
      } else {
        return 'samples-header-cell'
      }
    },
    //   分页
    handleSizeChange(val) {
      this.$emit('size', val)
    },
    // 改变pageSize
    handleCurrentChange(val) {
      this.$emit('current', val)
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
